import { Tabs, Affix, Row, Button,message } from 'antd';
import { useLocation, connect,useDispatch,history } from 'umi';
import React,{ useEffect ,useState} from 'react';
import Operate from './details/operate';
import RepaymentDetails from './repayment';
import OperationRecord from './operationRecord';
import styles from '../index.less';
import {getOrderDetails} from '@/service/order';

function OrderDetails(props: any) {
  const {
    global: { currentRoute },
    location
  } = props;
  const dispatch = useDispatch()
  const [data,setDate]  = useState()
  const {
    query: { type },
  }: any = useLocation();
  useEffect(() => {
    const id  = location?.search?.split('id=')[1]
    getOrderDetails(id).then((res: any) => {
      if (res.success) {
        setDate(res.data)
      }
    });
  }, []);
  return (
    <div className={styles.page}>
      <Tabs
        type="card"
        defaultActiveKey="1"
        // onChange={onTabsChange}
        items={[
          {
            label: '订单详情',
            key: '1',
            children: <Operate />
                      
          },
          {
            label: '还款明细',
            key: '2',
            children: <RepaymentDetails info={data} />,
          },
          {
            label: '操作记录',
            key: '3',
            children: <OperationRecord info={data}/>,
          },
        ]}
      />
      {!type && (
        <Affix offsetBottom={2}>
          <Row style={{ justifyContent: 'center', background: '#fff' }}>
            <Button onClick={(e)=>{
              e.stopPropagation();
              dispatch({
                type: 'global/deleteTabs',
                payload: currentRoute,
              });
              history.goBack();
            }}>关闭</Button>
          </Row>
        </Affix>
      )}
    </div>
  );
}

export default connect(({ global }: any) => ({ global }))(OrderDetails);
